Een super-eenvoudig html-bestand ziet er als volgt uit:
<!doctype html>
<html lang="en-US">
<head>
<title>Fox</title>
</head>
<body>
the quick brown fox jumps over the lazy dog.
</body>
</html>
De stukjes tekst die beginnen met < en eindigen met > heten tags.
Tags komen voor in paren.
Zo zie in bovenstaande html-code de paren <html> en </html>,
<body> en </body>, <title> en </title>, <div> en </div>.
Tags die beginnen met </ gevolgd door een letter zijn sluit-tags.
De andere, die beginnen met < gevolgd door een letter, zijn openings-tags.
Een tekstgedeelte dat begint met een openings-tag
en eindigt met een overeenkomstige sluit-tag
worden in HTML een element genoemd.
Als je dit bestand met een browser laat zien, zie je zoiets als
De regel "the quick brown fox jumps over the lazy dog"
bevat alle letters van het alfabet.
Het gedeelte van het scherm waarin body-element van de html-code wordt getoond,
heet de viewport.
Op een mobiele telefoon heeft de viewport een vast grootte voor
de portrait-stand en de landscape-stand.
Op een PC kun je de grootte van de viewport wijzigen
door het browser-venster groter of kleiner te maken.
De layout past zich aan aan de breedte van de viewport
Je kunt veel meer tekens tonen dan alleen maar de letters van het alfabet.
Hier is een voorbeeld. De hml-code ziet er als volgt uit:
Als je deze html-code met een browser laat zien, zie je zoiets als:
Binnen HTML wordt default de codering van UTF-8 gebruikt
om allerlei speciale tekens af te drukken.
UTF staat voor Unicode Transformation Format.
Als je op internet met de zoekterm unicode zoekt,
vind je allerlei sites waar wordt verteld
welke codes corresponderen met welk plaatje.
Binnen unicode hebben allerlei tekens een nummer gekregen.
Zo heeft het teken ✉ het nummer 9993 gekregen.
Als je het getal 9993 schrijft in het zestientallig stelsel,
wordt dit 2709, want
2×163 +
7×162 +
0×161 +
9×160 =
9×4096 + 7×256 + 9 = 8192 + 1792 + 9 = 9993.
Daarom kun je het teken ✉ binnen HTML weergeven
met zowel ✉ als met ✉.
De x in de laatste schrijfwijze ✉ komt van
het woord hexadecimaal, wat het internationale woord voor
zestientallig is.
Voor veel tekens is ook een handig te onthouden omschrijving
bedacht. Zo kun je het euro-teken € ook weergeven met €
In dit bovenstaand voorbeeld staat alle tekst tussen de tags
<body> en </body>, met andere woorden: in het
body-element.
Als het aantal tekens te lang is om binnen de breedte
van het body-element te passen, wordt de regel afgebroken
en op een volgende regel vervolgd.
Als we het browser-venster iets breder maken, wordt de regels langer,
en wordt de tekst op andere plaatsen afgebroken. In onderstaand
voorbeeld is dezelfde tekst niet over zes, maar over vijf regels verdeeld.
Als je een enkel kort stukje tekst wat groter wilt maken
kun je het omgeven met <font>- en <font>-tags.
Bijvoorbeeld: <font size="6">➊</font> leidt tot
➊.
Je kunt op die manier ook de kleur van een stukje tekst veranderen.
<font size="5" color="red">➊</font> leidt tot
➊
<a>, <img>, <svg> volgen de regels die voor tekst gelden
Als je een plaatje invoegt, wordt dat door de browser geïnterpreteerd als een gewone letter.
Het plaatje verschijnt tussen de andere letters in de tekst.
Ook een <a>-element wordt als gewone tekst behandeld.
Het als bitmap-bestand opgeslagen plaatje css_0003_rood_geel_16_16.bmp is 16 pixels breed en 16 pixels hoog.
Dat is net zo hoog als het standaard lettertype van de meeste browsers.
Sterk vergroot ziet het er als volgt uit:
Het plaatje dat is gedefinieerd met behulp van SVG
(Scalable Vector Graphics) is niet vastgelegd in een afzonderlijk bestand.
Je kan het groter afbeelden door een andere width en height op te geven,
bijvoorbeeld :
De stroke-width bepaalt de dikte van de rand, en die vermenigvuldigden we
- net als de width en de height - met 8.
Je krijgt dan:
Inline elementen
We zagen hierboven dat de elementen img, svg en a zich met
de tekst meebewegen, als de viewport groter of kleiner wordt gemaakt.
Deze elementen noemen we inline-elementen.
Verwijzen naar een stylesheet vanuit een HTML-bestand
In een HTML-bestand kun je een verwijzing naar een stylesheet opnemen
vanuit het <head>-element.
Een stylesheet moet de extensie css hebben.
Daarom wordt zo'n stylesheet ook wel een css-bestand genoemd.
Als het css-bestand niet bestaat,
wordt de regel om het html-bestand en
het css-bestand aan elkaar te koppelen, niet uitgevoerd.
Ook als het css-bestand leeg is - dus wanneer het er wel is,
maar er niets in staat - verandert er niets.
In het volgende voorbeeld wordt vanuit een html-bestand verwezen
naar een css-bestand met de naam styles.css.
Een css-bestand bevat zg. rulesets.
In een ruleset wordt aangegeven hoe de een gedeelte van
een html-pagina moet worden weergegeven.
Een ruleset ziet er bijvoorbeeld als volgt uit:
body {
color: black;
font-family: Helvetica;
}
De volgende illustratie geeft aan hoe de verschillende
onderdelen van de ruleset heten.
Een selector geeft aan welk deel van het
html-bestand het betreft.
Het declaratie-blok geeft aan wat er voor dat deel
van het html-bestand geldig is.
In dit voorbeeld staat er dat tekst getoond wordt in zwarte letters,
en dat het lettertype helvetica is.
Als helvetica niet beschikbaar is op de computer
wordt tekst in het default lettertype van de computer getoond.
Selector
Je kunt een opmaak-eigenschap via een selector aan een element,
class of id koppelen.
Als je de selector aan een element wil koppelen, krijgt de selector
de naam van de tag.
Voor de opmaak van een class laat je de selector met een punt beginnen.
Voor de opmaak van een id laat je de selector met een # beginnen.
Schematisch:
selector begint met
verwijst naar
voorbeeld
letter
tag
selector div is van toepassing op
elk html-element div
.
class
selector .abc is van toepassing op
elk html-element met attribuut class="abc"
#
id
selector #A132 is van toepassing op
het html-element met attribuut id="A132"
Block-level elementen
In de volgende html-code bevat het body-element de tekst
"rood oranje geel groen lichtblauw donkerblauw violet".
De woorden in deze tekst zijn omgeven door div-elementen.
De woorden worden nu niet achter elkaar geplaatst,
zoals in een gewone zin, maar onder elkaar.
Het div-element is dus geen inline element.
We noemen het een block-level element,
omdat de inhoud ervan zich als het ware binnen een eigen blok bevindt.
De blokken krijgen in dit voorbeeld een een eigen regel.
Een css-bestand koppelen aan een html-bestand; kleur
Om te kunnen zien wat er pecies aan de hand is, koppelen we
het html-bestand aan een css-bestand.
In dit css-bestand specificeren we voor elk div-element een
achtergrondkleur (background-color) ,
de afstand van de tekst tot de rand (padding),
de dikte van de rand (border), hoe de rand eruit ziet (solid),
welke kleur de rand krijgt,
en hoe ver het div-element verwijderd moet zijn van elk
ander div-element (margin).
De afstandsmaat die gebruikt wordt is em.
1em is gelijk aan de font-size. Dat is de hoogte van de letters.
Een browser geeft het html-bestand als volgt weer:
Hoe verandert een block-level element mee met de grootte van de viewport?
We bekijken een blick-level-element waarin een tegeltjeswijsheid is opgenomen.
<!doctype html>
<html lang="en-US">
<head>
<title>Margin Border Padding Content</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tegel">
Onderzoekt alle dingen,
maar behoudt het goede.
</div>
</body>
</html>
Het bijbehorende css-bestand heeft de volgende inhoud:
In een browser zie je mogelijkerwijs het volgende resultaat:
Als je het browser-scherm (de viewport) breder maakt,
wordt het block-level element breder:
Horizontaal past het block-level element zich aan aan de
breedte van de viewport.
Als je daarentegen de viewport zo smal maakt, dat de tekst
niet meer op één regel past,
wordt het block-element smaller, maar wordt het block-element
in verticale richting langer.
Verticaal gezien blijft het block-level element zo klein mogelijk,
maar wel zodanig dat de gehele inhoud er in past.
Inspecteren
Als je rechtsklikt in de viewport, verschijnt een pop-up-menu
waarin een menukueze voorkomt die zoiets luidt als "Inspecteren" of
"Element inspecteren", of iets dergelijks.
Als je als browser Firefox gebruikt, luidt de omschrijving
"Inspect (Q)".
Je ziet dan allerlei gegevens over hoe het html-bestand wordt weergegeven
door de browser. In eerste instantie bekijk je het tabblad "Inspector".
Dit tabblad kun je onderverdelen in 3 panelen:
Search HTML, Filter Styles en Layout.
Html-code en naam stylesheet-bestand in paneel "Search HTML"
In het paneel "Search HTML" vind je de html-code.
Je kunt daarin een regel aanklikken.
Als je dat doet, worden in de panelen "Filter Styles" en "Layout"
gegevens getoond over de aangeklikte regel
(die dan een blauwe achtergrondkleur heeft).
In het bovenstaande plaatje is de regel
<html lang="en-US">
aangeklikt. In het Layout-planeel zie je dan
dat de grootte van de hele viewport 461 × 146 pixels groot is.
In het "paneel "Search HTML" zie je in het head-element welk bestand
als stylesheet wordt gebruikt.
Css-eigenschappen in paneel "Filter Syles"
Als je in het "paneel "Search HTML" op de de regel
<div class="tegel"> ... <-div>
klikt, zie je in het paneel "Filter Styles" de
css-rulesets die voor dit div-element gelden.
Box Model Properties in paneel "Layout"
Het layout-paneel toont overigens nog meer gegevens,
te weten de z.g. Box Model properties.
Hoveren
Als je met de muis boven die regel blijft staan (d.w.z. boven die
regel "hovert"), zie je
waar dit block-level element div te vinden is in de viewport.
Als je hovert over het body-element div, zie je dat daar default
een margin bij ingesteld voor dit block-level element. Deze marge is
geel weergegeven.
Tekst centreren
We gaan uit van de volgende html-code :
<!doctype html>
<html lang="en-US">
<head>
<title>Tekst centreren</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tegel">
<div class="tegel_tekst">
Onderzoekt alle dingen, maar behoudt het goede.
</div>
</div>
</body>
</html>
</div>
</body>
</html>
De max-inlize-size declaration geeft aan dat de tekst
"Onderzoekt alle dingen ... goede" niet breder mag worden dan 20em.
De declaration "margin: 0 auto;" geeft aan dat de tekst gecentreerd zal worden.
De default font-size (lettergrootte) is 16 pixels.
1em is dus 20 × 16 = 320 pixels.
Inspecteren geeft aan dat de tekst iets korter is is dan 320 pixels.
De default-waarde van de declaration voor box-sizing bij de
Box Model Properties is "box-sizing: content-box;".
Dat betekent:
Default geldt dat de grootte van een block-level element als de
grootte van de inhoud (content) van het block-level element wordt beschouwd.
Als je de viewport breder maakt, blijft de tekst in het midden staan,
en verschuift daardoor naar naar rechts.
Als je de viewport smaller maakt, blijft de tekst gecentreerd,
maar als de viewport te smal is om een tekst op de hele regel te kunnen
plaatsen, wordt de regel wel op de gewone manier afgebroken.
Als de viewport breed genoeg is, staan de verschillende blokken naast elkaar.
Als je de viewport iets minder breed maakt, kom je op het punt
dat de blokken nog net op één regel passen.
Als je de viewport dan nog smaller maakt,
bepaalt de declaration "overflow-x: auto;" wat er gaat gebeuren.
De waarde auto bij eigenschap overflow-x betekent
dat er een horizontale scroll-balk wordt getoond.
Op een PC kun je dan met de muis naar rechts scrollen,
op een mobiele telefoon kun je dan naar rechts swipen
om de onzichtbare of half-onzichtbare blokken in zijn geheel te tonen.
Flex met onzichtbare of half-onzichtbare blokken
doorschuiven naar volgende regel
Als je in het css-bestand de declaration "overflow-x: auto;" wijzigt in
"flex-wrap: wrap;" worden de onzichtbare of half-onzichtbare blokken
doorgeschoven naar een volgende regel.
Het css-bestand ziet er dan als volgt uit:
Bij de meeste browsers heeft het standaard lettertype (default font-family)
een lettergrootte (font-size) van 16px.
Als je geen lengte-eenheid opgeeft, wordt dat door de browser
geïnterpreteerd alsof je pixels bedoelt.
Anders gezegd: de default lengte-eenheid is pixels.
Een pixel is een enigszings misleidende naam.
Een css-pixel hoeft niet exact gelijk te zijn aan een beeldscherm-pixel.
Dat is met name het geval bij high-resolution (“retina”) beeldschermen.
Het hangt af van een combinatie van de browser, het operating systeem en de hardware
hoe lang een pixel werkelijk is, maar gewoonlijk is het 1 inch op het scherm.
Het is in dit verband verstandig in het head-element aan het begin van het html-bestand
de regel
<meta name="viewport" content="width=device-width, initial-scale=1.0">
op te nemen.
Dit commando voorkomt dat teksten op mobiele telefoons veel te klein worden weergegeven.
Bovenstaande eenheden worden absolute eenheden genoemd.
Daarnaast heb je nog relatieve eenheden.
Hiertoe behoren:
1 em = de font size van het huidige element; handig voor padding, width,
height, or border-radius.
1 rem = root em = de font size van het hoogste niveau knooppunt
van de DOM (Document Object Model), het root-element.
Je kunt met :root verwijzen naar dit root-element.
Html-elementen worden weergegeven als een rechthoek die een
hoogte en een breedte heeft.
Deze hoogte en breedte worden vaak berekend, maar je kunt ook
de hoogte opgeven met behulp van de hiervoor genoemde lengte-eenheden.
Hoe de hoogte en breedte bepaald worden kun je beïnvloeden met
de property block-sizing.
Default heeft bock-sizing de waarde content-box.
Dat betekent dat width en height betrekking hebben op de breedte en
de hoogte van het content-gedeelte van het element.
De waarde border-box maakt dat width en height betrekking hebben op
de breedte en de hoogte van het border-gedeelte van het element.
De volgende html-code bevat twee elementen. Van het ene element
wordt de grootte berekend aan de hand van content-box,
Van het andere element wordt de grootte bepaald aan de hand van
border-box.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<link rel="stylesheet" href="styles3.css">
</head>
<body>
<div class="boxSizingContent">
The quick brown fox jumps over the lazy dog.
</div>
<div class= "boxSizingBorder" >
The quick brown fox jumps over the lazy dog.
</div>
</body>
</html>
In het bijbehorende css-bestand wordt de klasse boxSizingContent
gekoppeld aan de css-regel "box-sizing: content-box;" en
wordt de klasse boxSizingBorder gekoppeld aan de css-regel
"box-sizing: border-box;". Verder zijn er geen verschillen tussen
de klassen boxSizingContent en boxSizingBorder, afgezien van het
feit dat ze anders gekleurd zijn.
Het resultaat in een browser ziet er als volgt uit:
In het volgende plaatje laten rode pijlen zien welke
afstanden gelijk zijn aan de helft van de breedte van
het browser-venster, d.i. de viewport.
Het bovenstaand plaatje laat zien dat de afstand tussen
de twee rechthoekige elementen ongeveer even groot is
als de afstand tussen de linkerkant van de viewport en
het rechthoekige element, en ongeveer even groot als
de hoogte van de letters, d.i. de lettergrootte (font-size).
Box-sizing=border-box instellen voor het hele css-bestand
Het werken met de "box-sizing: border-box"-methode wordt
over het algemeen prettiger gevonden.
Je hebt dan minder problemen met tekst-gedeelten
die recht onder elkaar moeten staan, en niet moeten verspringen.
Advies: Laat elk stylesheet beginnen met onderstaande code.
Dan geldt voor de hele stylesheet dat de grootte van elk
html-element wordt berekend volgens de border-box-methode.
*,
::before,
::after {
box-sizing: border-box;
}
De * is de universal selector. Als je deze code toevoegt
aan het begin van je document, specificeer je met height
en width altijd de grootte van het element
die het intuïtief voor jou heeft.
Padding gooit dan niet zoveel roet in het eten.
Even hoge kolommen
Met flexbox kun je even hoge kolommen bereiken.
Het html-bestand
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Even hoge kolommen</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="main">
Wij, die in concentratiekampen hebben geleefd,
wij zijn de gevangenen niet vergeten die door
de barakken liepen om anderen op te beuren en
te troosten, die hun laatste korst brood aan een
medegevangene schonken. Hun aantal was wellicht
klein, toch hebben deze mannen overtuigend
bewezen dat één ding de mens
niet kan worden ontnomen: de allerlaatste
menselijke vrijheid - de keuze onder alle omstandigheden
zijn eigen houding te bepalen, zijn eigen
weg te kiezen.
</div>
<div class="sidebar">
Uit "De zin van het bestaan", door
Viktor E. Frankl
</div>
</div>
</body>
</html>
Als je een tekst bekijkt op een groot beeldscherm,
waarop je twee A4-tjes naast elkaar kunt zien,
kan een tekstregel erg breed worden.
Dat is niet prettig leesbaar.
De volgende html-code verwijst helemaal niet naar een css-bestand:
<!doctype html>
<html lang="en-US">
<head>
<title>Geheimtalen</title>
</head>
<body>
In de moderne wereld gonst de lucht van codes.
Bij elk gesprek dat we voeren met een mobiele telefoon,
bij elk televisiekanaal waarop we afstemmen,
bij elke keer dat we geld opnemen bij een pinautomaaat,
vertrouwen we op uitgekiende versleutelingen door de computer
die evoor zorgen dat spiedende oren en ogen van anderen
niets kunnen zien of horen.
(Uit : Geheimtalen, Stephen Pincock en Mark Frary, 2007)
</body>
</html>
Daarmee zie je op een heel breed beeldscherm:
Ik probeer te bereiken dat een regel niet veel
breder is dan wat je op een gewone bladzijde van een boek ziet.
Daarom breng ik in het html-bestand een verwijzing naar een stylesheet aan
en omgeef ik de tekst met een <div>-tag die verwijst naar een
class, die ik "center_strip" noem.
<!doctype html>
<html lang="en-US">
<head>
<title>Geheimtalen</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="site_center" class="center_strip">
In de moderne wereld gonst de lucht van codes.
Bij elk gesprek dat we voeren met een mobiele telefoon,
bij elk televisiekanaal waarop we afstemmen,
bij elke keer dat we geld opnemen bij een pinautomaaat,
vertrouwen we op uitgekiende versleutelingen door de computer
die evoor zorgen dat spiedende oren en ogen van anderen
niets kunnen zien of horen.
(Uit : Geheimtalen, Stephen Pincock en Mark Frary, 2007)
</div>
</body>
</html>
definieert een variabele met de naam --max_page_width.
Deze variabele heeft de waarde 45em.
Dat is de breedte die een doorsnee regel in een boek heeft.
Deze varabele is in het helebestand bruikbaar,
want hij is gedefinieerd binnen :root.
Het knooppunt :root kwamen we eerder tegen in de paragraaf afstanden
Het tweede commando
*,
::before,
::after {
box-sizing: border-box;
}
maakt dat je de grootte van alle html-elementen
definieert aan de hand van de border van het element.
Zie hiervoor de paragraaf
Box-sizing=border-box instellen voor het hele css-bestand.
Dit commando nemen we standaard op in elk css-bestand.
In het derde commando liezen we ons favoriete lettertype.
Dat is Arial, en als dat niet aanwezig is op de computer, dan is het Calibri.
body {
font-family: arial, calibri ;
}
In het laatste commando gebruiken we de variabele --max_page_width
om de maximale breedte van een <div>-tag met class"center-strip"
in te stellen.
De regel "margin:0 auto;" maakt dat de <div>-tag
gecentreerd wordt.
Als je het browservenster smal maakt,
wordt de tekst normaal over de regels verdeeld.
Als je het browservenster ongeveer zo breed maakt dat een regel ongeveer
even lang is als in een gewoon boek, dan wordt de tekst over wat minder
regels verdeeld.
Maar maak je het browservenster nog breder, zodat het de breedte van 45em overschrijdt,
dan blijft de tekst over evenveel regels verdeeld, en verschijnen er
blanco marges links en rechts van de tekst.
Bij een smal browservenster zie je alle items in de lijst
verdeeld over meerdere regels.
Bij een breder browservenster blijft dat zo:
plaatjes
Het volgende html-bestand bevat 3 svg-plaatjes die blauw gekleurd zijn.
De eerste twee plaatjes zijn identiek.
Het derde plaatje verschilt alleen van de andere twee in
de <svg>-tag.
Het derde plaatje is namelijk als viewBox gedefinieerd, en
niet als plaatje met vaste breedte en hoogte.
Het plaatje is daardoor schaalbaar, d.w.z. dat het van grootte kan
veranderen.
<!DOCTYPE html>
<html>
<head>
<title>svg en css</title>
<link rel="stylesheet" href="try.css" />
</head>
<body>
<div id="site_center" class="center_strip">
<div class="picture_scroll">
<svgwidth="500" height="50">
<rect x="0" y="0" width="400" height="50" fill="lightGreen" />
<rect x="400" y="0" width="100" height="50" fill="darkGreen" />
<text x="35" y="30">The quick brown fox jumps over the lazy dog</text>
</svg>
</div>
<br><br>
<div class="picture_scroll">
<div class="picture_center" >
<svgwidth="500" height="50">
<rect x="0" y="0" width="400" height="50" fill="lightGreen" />
<rect x="400" y="0" width="100" height="50" fill="darkGreen" />
<text x="35" y="30">The quick brown fox jumps over the lazy dog</text>
</svg>
</div>
</div>
<br><br>
<svgviewBox="0,0 500 50">
<rect x="0" y="0" width="400" height="50" fill="lightGreen" />
<rect x="400" y="0" width="100" height="50" fill="darkGreen" />
<text x="35" y="30">The quick brown fox jumps over the lazy dog</text>
</svg>
</div>
</body>
</html>
Het bijbehorende css-bestand ziet er als volgt uit:
/* variabele voor maximale breedte van de tekstregels definiëren*/
:root {
--max_page_width: 45em;
}
/* grootte van html-elementen specificeren op basis van border */
*,
::before,
::after {
box-sizing: border-box;
}
/* gewenst lettertype */
body {
font-family: arial, calibri ;
}
/* maximale breedte van de tekstregels instellen;
tekst centreren op brede schermen */
.center_strip {
max-inline-size: var(--max_page_width);
margin:0 auto;
}
/* items in lijst horizontaal scrollen */
.flexcontainer_scroll {
display: flex;
overflow-x: auto;
}
.picture_scroll {
overflow-x: auto;
}
.picture_center {
text-align: center;
}
Als je de pagina bekijkt met een smal browservenster zie je:
Als je de pagina bekijkt met een breed browservenster zie je:
Een nadeel van een viewBox is dat een tekst die onderdeel is
van een plaatje, met het plaatje mee groter of kleiner wordt.
conclusie
Het volgende css-bestand vormt een goed uitgangspunt om een
site te maken die er redelijk uitziet:
/* variabele voor maximale breedte van de tekstregels definiëren*/
:root {
--max_page_width: 45em;
}
/* grootte van html-elementen specificeren op basis van border */
*,
::before,
::after {
box-sizing: border-box;
}
/* gewenst lettertype */
body {
font-family: arial, calibri ;
}
/* maximale breedte van de tekstregels instellen;
tekst centreren op brede schermen */
.center_strip {
max-inline-size: var(--max_page_width);
margin:0 auto;
}
/* items in lijst horizontaal scrollen */
.flexcontainer_scroll {
display: flex;
overflow-x: auto;
}
/* voor plaatje dat te breed is om in zijn geheel te tonen
en je horizontaal wilt kunnen scrollen */
.picture_scroll {
overflow-x: auto;
}
/* voor plaatje dat gecentreerd moet blijven */
.picture_center {
text-align: center;
}
We geven de grid-elementen hun grijze kleur weer terug,
en trekken verticale lijnen tussen en naast de grid-elementen.
Deze nummeren wij vanaf links met 1, 2, 3 en 4.
Op dezelfde manier kunnen we de horizontale lijnen
tussen de grid-elementen trekken en van bovenaf nummeren.
Deze lijnen noemen we de grid-lines.
We kunnen daarmee deelgebieden van het raster benoemen.
Het css-bestand
In bovenstaand css-bestand kun je de regel
'grid-template-columns: auto auto auto;' vervangen door
'grid-template-columns: repeat(3, auto);'
en de regel
'grid-template-rows: auto auto auto;' door
'grid-template-rows: repeat(3, auto);'.
Je gebruikt media-queries om een gedeelte van het html-bestand
een andere opmaak te geven
afhankelijk van de breedte van het browservenster
(dat ook wel viewport genoemd wordt).
In het volgende voorbeeld krijgt het onderdeel
waaraan de class 'beginletter_pangram' is toegekend een andere kleur
afhankelijk van de breedte van het browservenster.
Bij een beginleter-pangram begint elke woord met een
volgende letter van het alfabet.
Het html-bestand ziet er als volgt uit:
